<!-- 工作编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="840"
    :model-value="modelValue"
    :title="isUpdate ? '修改工作' : '新建工作'"
    @update:modelValue="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="分享佣金" prop="title">
        <el-input v-model="form.share_bouns" style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="工作备注" prop="title">
        <el-input
          v-model="form.admin_remark"
          placeholder="备注给自己看"
          style="width: 250px"
        />
      </el-form-item>

      <el-form-item label="工作标题" prop="title">
        <el-input v-model="form.title" style="width: 250px" />
      </el-form-item>

      <el-form-item label="工作日期" prop="work_date">
        <el-input
          v-model="form.work_date"
          :prefix-icon="Calendar"
          style="width: 250px"
        />
      </el-form-item>

      <el-form-item label="工作时间" prop="work_time">
        <el-input
          v-model="form.work_time"
          :prefix-icon="Clock"
          style="width: 250px"
        />
      </el-form-item>

      <el-form-item label="工作地点" prop="work_place">
        <el-input
          v-model="form.work_place"
          style="width: 160px"
          placeholder="手写或者选点"
          class="mr"
        />
        <el-button
          size="small"
          type="success"
          :icon="LocationInformation"
          plain
          @click="openMapPicker"
          >地图选点</el-button
        >
      </el-form-item>

      <el-form-item label="年龄限制">
        <el-input v-model="form.age_s" class="mr" style="width: 150px"
          ><template #append>岁以上</template></el-input
        >
        <el-input v-model="form.age_e" style="width: 150px"
          ><template #append>岁以下</template></el-input
        >
      </el-form-item>
      <el-form-item label="性别限制">
        <el-radio v-model="form.gender_limit" :label="0">不限</el-radio>
        <el-radio v-model="form.gender_limit" :label="1">限制</el-radio>
      </el-form-item>
      <el-form-item v-if="form.gender_limit === 0" label="招聘人数">
        <el-input
          v-model.number="form.gender_total"
          style="width: 150px"
          :prefix-icon="UserFilled"
        >
          <template #append>人</template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="form.gender_limit === 1" label="招聘人数">
        <el-input
          v-model.number="form.gender_boy"
          style="width: 150px"
          placeholder="男"
          class="mr"
        >
          <template #append>人</template>
          <template #prepend>男</template>
        </el-input>
        <el-input
          v-model.number="form.gender_girl"
          style="width: 150px"
          placeholder="女"
        >
          <template #prepend>女</template>
          <template #append>人</template>
        </el-input>
      </el-form-item>

      <!-- <el-form-item label="身高限制">
          <el-radio v-model="form.height_limit" :label="0">不限</el-radio>
          <el-radio v-model="form.height_limit" :label="1">限制</el-radio>
        </el-form-item> -->
      <!-- <el-form-item v-if="form.height_limit === 1 && form.gender_limit === 0" label="最低要求">
          <el-input v-model="form.height_total" style="width:150px" prefix-icon="el-icon-s-custom"><template slot="append">cm</template></el-input>
        </el-form-item> -->
      <el-form-item label="最低身高">
        <el-input
          v-model="form.height_boy"
          style="width: 150px"
          placeholder="0为不限"
          class="mr"
          ><template #append>cm</template
          ><template #prepend>男</template></el-input
        >
        <el-input
          v-model="form.height_girl"
          style="width: 150px"
          placeholder="0为不限"
          ><template #append>cm</template
          ><template #prepend>女</template></el-input
        >
      </el-form-item>

      <el-form-item label="工作内容" prop="work_require">
        <el-input
          v-model="form.work_require"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="请输入内容"
          style="width: 600px"
        />
      </el-form-item>

      <el-form-item label="工资待遇" prop="salary">
        <el-input v-model="form.salary" style="width: 120px" class="mr" />
        <el-select
          v-model="form.salary_unit"
          placeholder="工资单位"
          style="width: 100px"
        >
          <el-option
            v-for="item in jobSalaryUnit"
            :key="item.id"
            :label="item.title"
            :value="item.title"
          />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="VIP工资" prop="salary_vip">
          <el-input v-model.number="form.salary_vip" placeholder="VIP补贴" style="width:120px" />
          <el-select v-model="form.salary_unit" placeholder="工资单位" style="width:100px">
            <el-option
              v-for="item in jobSalaryUnit"
              :key="item.id"
              :label="item.title"
              :value="item.title"
            />
          </el-select>

        </el-form-item> -->

      <el-form-item label="工资说明">
        <el-input v-model="form.salary_memo" style="width: 300px" />
      </el-form-item>

      <el-form-item label="工作福利">
        <el-checkbox-group v-model="form.welfare">
          <el-checkbox-button
            v-for="item in welfareList"
            :key="item.id"
            :label="item.title"
            >{{ item.title }}</el-checkbox-button
          >
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="结算时间">
        <el-input v-model="form.when_pay" style="width: 160px" class="mr" />
        <el-button-group>
          <el-button size="small" @click="setWhenPay('活动结束后24小时内')"
            >活动结束后24小时内</el-button
          >
          <el-button size="small" @click="setWhenPay('现结')">现结</el-button>
          <el-button size="small" @click="setWhenPay('周结')">周结</el-button>
          <el-button size="small" @click="setWhenPay('月结')">月结</el-button>
        </el-button-group>
      </el-form-item>

      <el-form-item label="结算方式">
        <el-input v-model="form.how_pay" style="width: 160px" class="mr" />
        <el-button-group>
          <el-button size="small" @click="setHowPay('钱包')">钱包</el-button>
          <el-button size="small" @click="setHowPay('现金')">现金</el-button>
          <el-button size="small" @click="setHowPay('银行卡')"
            >银行卡</el-button
          >
        </el-button-group>
      </el-form-item>

      <el-form-item label="是否面试">
        <el-radio v-model="form.interview" :label="0">不需面试</el-radio>
        <el-radio v-model="form.interview" :label="1">需要面试</el-radio>
      </el-form-item>

      <el-form-item label="报名之后" prop="after_apply_note">
        <el-input v-model="form.after_apply_note" style="width: 300px" />
      </el-form-item>

      <el-form-item label="会员端显示">
        <el-radio v-model="form.is_display" :label="0">隐藏</el-radio>
        <el-radio v-model="form.is_display" :label="1">显示</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
  <!-- 地图位置选择弹窗 -->
  <ele-map-picker
    v-model="mapVisible"
    :dark-mode="darkMode"
    :return-regions="true"
    :keyword-mode="mode === 'keyword'"
    @done="onChoose"
  />
</template>

<script setup>
  import { ref, reactive, watch } from 'vue';
  import {
    LocationInformation,
    Calendar,
    Clock,
    UserFilled
  } from '@element-plus/icons-vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { useFormData } from '@/utils/use-form-data';
  import {
    addJob,
    updateJob,
    getJobCates,
    getJobSalaryUnit,
    getWelfareList
  } from '@/api/company';

  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';

  const themeStore = useThemeStore();
  const { darkMode } = storeToRefs(themeStore);

  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object
  });

  /** 是否是修改 */
  const isUpdate = ref(false);

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 工作分类列表 */
  const cateList = ref([]);

  /** 工资单位列表 */
  const jobSalaryUnit = ref([]);

  /** 福利列表 */
  const welfareList = ref([]);

  /** 表单数据 */
  const [form, resetFields, assignFields] = useFormData({
    id: 0,
    company_id: 0,
    site_id: 0,
    deadline: '',
    admin_remark: '',
    share_bouns: 0,
    work_date: '',
    work_time: '',
    is_display: '',
    gender_total: '',
    gender_boy: '',
    gender_girl: '',
    title: '',
    age_s: 0,
    age_e: 99,
    gender_limit: 0,
    height_boy: '',
    height_girl: '',
    work_require: '',
    salary: '',
    salary_unit: '',
    salary_memo: '',
    welfare: [],
    when_pay: '',
    how_pay: '',
    interview: 0,
    after_apply_note: '',
    work_place: '',
    work_place_lng: '',
    work_place_lat: ''
  });

  /** 表单验证规则 */
  const rules = reactive({
    title: [
      {
        required: true,
        message: '请输入工作名称',
        type: 'string',
        trigger: 'blur'
      }
    ],
    work_place: [
      {
        required: true,
        message: '请输入工作地点',
        type: 'string',
        trigger: 'blur'
      }
    ],
    work_require: [
      {
        required: true,
        message: '请输入工作内容',
        type: 'string',
        trigger: 'blur'
      }
    ],
    salary: [
      {
        required: true,
        message: '请输入工资待遇',
        type: 'string',
        trigger: 'blur'
      }
    ],

    site_id: [
      {
        required: true,
        message: '请选择站点',
        type: 'array',
        trigger: 'blur'
      }
    ],

    job_category_id: [
      {
        required: true,
        message: '请选择分类',
        type: 'int',
        trigger: 'blur'
      }
    ]
  });

  /** 保存编辑 */
  const save = () => {
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      loading.value = true;
      const saveOrUpdate = isUpdate.value ? updateJob : addJob;
      var requestData = Object.assign({}, form);
      requestData.welfare = JSON.stringify(requestData.welfare);
      saveOrUpdate(requestData)
        .then((msg) => {
          loading.value = false;
          EleMessage.success(msg);
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          EleMessage.error(e.message);
        });
    });
  };

  /** 地点检索类型 */
  const mode = ref('poi');

  /** 是否显示地图选择弹窗 */
  const mapVisible = ref(false);

  /** 打开位置选择 */
  const openMapPicker = () => {
    mapVisible.value = true;
  };

  /** 地图选择后回调 */
  const onChoose = (location) => {
    form.work_place = `${location.name}`;
    form.work_place_lat = `${location.lat}`;
    form.work_place_lng = `${location.lng}`;
    mapVisible.value = false;
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  /** 获取工作分类 */
  getJobCates({ page: 1, limit: 99999999 })
    .then((res) => {
      cateList.value = res.list;
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });

  /** 获取工资单位 */
  getJobSalaryUnit({ page: 1, limit: 99999999 })
    .then((res) => {
      jobSalaryUnit.value = res.list;
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });

  /** 福利列表 */
  getWelfareList({ page: 1, limit: 99999999 })
    .then((res) => {
      welfareList.value = res.list;
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });

  const setWhenPay = (val) => {
    form.when_pay = val;
  };

  const setHowPay = (val) => {
    form.how_pay = val;
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        if (props.data) {
          assignFields({
            ...props.data
          });
          isUpdate.value = true;
        } else {
          isUpdate.value = false;
        }
      } else {
        resetFields();
        formRef.value?.clearValidate?.();
      }
    }
  );
</script>
<style lang="scss" scoped>
  .mr {
    margin-right: 8px;
  }
</style>
